<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
            background: #f4f4f4;
            font: 14px/1.5 "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;
        }

        .container {
            width: 1150px;
            margin: 20px auto;
        }

        .box {
            border-radius: 4px;
            overflow: hidden;
            float: left;
            margin-right: 20px;
            background: #fff;
            position: relative;
            padding-bottom: 5px;
        }

        .box img {
            width: 210px;
            height: 118px;
        }

        title {
            padding: 0 10px;
            margin-top: 4px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 190px;
        }
    </style>
</head>

<body>
    <button id="change">换一换</button>
    <div class="container"></div>
    <script>
        //发送请求，获得数据
        var pageNo = 2
        var formId = 379
        //jsonp的原理是创建一个script标签，里边放上请求的地址，然后再一个script里边定义一个函数传入data，最后在另一个标签里边调用 
        document.querySelector("#change").onclick = function () {
            //创建script标签
            var script = document.createElement("script")
            //配置script的src
            script.src = "https://api.gogoup.com/p1/data/recommend?type=0&pageNo=" + pageNo + "&pageSize=5&fromId=" + formId + "&jsonpcallback=callback&_=" + Date.now();
            https://api.gogoup.com/p1/data/recommend?type=0&pageNo=11&pageSize=5&fromId=307&jsonpcallback=jQuery1102004997906321107659_1594652451321&_=1594652451332
            document.body.append(script)
        }
        function callback(data) {
            console.log(data);
            var datas = data.datas
            var html = ""
            for (var i = 0; i < datas.length; i++) {
                html += `
                <div class="box">
                    <img src="${datas[i].image}" alt="">
                    <div class="title">${datas[i].name}</div>
                </div>
                `
            }
            console.log(html);
            document.querySelector(".container").innerHTML=html
            pageNo++
            formId=datas[datas.length-1].courseId
        }
    </script>
</body>

</html>